<template>
  <div class="box">
    <h3>收货地址</h3>
    <div class="checkout-address">
      <div class="text-box">
        <ul>
          <li>
            <span>收货人:</span>
            <span>{{ onceShujv.receiver }}</span>
          </li>
          <li>
            <span>联系方式:</span>
            <span>{{ onceShujv.contact }}</span>
          </li>
          <li>
            <span>收货地址:</span>
            <span>{{ onceShujv.address }}</span>
          </li>
        </ul>
        <div class="greenText" @click="xiugai">修改地址</div>
      </div>
      <div class="action-box">
        <!-- <button>切换地址</button> -->
        <!-- <button @click="addDizhi">添加地址</button> -->
        <el-button @click="qiehuan">切换地址</el-button>
        <el-button @click="addDizhiClick">添加地址</el-button>
      </div>
    </div>

    <h3>商品信息</h3>

    <div class="shujvBox">
      <table>
        <thead>
          <tr>
            <th width="520">商品信息</th>
            <th width="170">单价</th>
            <th width="170">数量</th>
            <th width="170">小计</th>
            <th width="170">实付</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>
              <div class="imgBox">
                <img :src="item.picture" alt="" />
                <div class="rightBox">
                  <p>{{ item.name }}</p>
                  <p>{{ item.attrsText }}</p>
                </div>
              </div>
            </td>
            <td><span>￥</span> {{ item.price }}</td>
            <td>{{ item.count }}</td>
            <td>
              <span>￥{{ item.count * item.price }}</span>
            </td>
            <td>
              <span>￥{{ item.count * item.price }}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加地址弹出层 -->
    <el-dialog
      title="添加收货地址"
      :visible.sync="dialogFormVisible"
      width="780px"
    >
      <el-form :model="form">
        <el-form-item label="收货人" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地区" :label-width="formLabelWidth">
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" :label-width="formLabelWidth">
          <el-input v-model="form.dizhi" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码" :label-width="formLabelWidth">
          <el-input v-model="form.youzheng" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址标签" :label-width="formLabelWidth">
          <el-input v-model="form.biaoqian" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ensure">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 切换收货地址 -->
    <el-dialog title="切换收货地址" :visible.sync="dialogVisible" width="600px">
      <div class="qiehuanBox">
        <ul>
          <li v-for="item in qhdizhi" :key="item.id" @click="xvanzhong(item)">
            <p>
              收货人：<span>{{ item.receiver }}</span>
            </p>
            <p>
              联系方式：<span>{{ item.contact }}</span>
            </p>
            <p>
              收货地址：<span>{{ item.address }}</span>
            </p>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureDizhi">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 金额明细 -->
    <h3>金额明细</h3>
    <div class="jine">
      <div class="shoopJine">
        <div>
          <span>商品件数：</span>
          <span>{{ num }}件</span>
        </div>
        <div>
          <span>商品总价：</span>
          <span>¥{{ money }}</span>
        </div>
        <div>
          <span>运费：</span>
          <span>¥0</span>
        </div>
        <div>
          <span>应付总额：</span>
          <span class="redText">¥{{ money }}</span>
        </div>
      </div>
    </div>

    <!-- 提交订单按钮 -->
    <div class="submit">
      <button class="tjBtn">提交订单</button>
    </div>
  </div>
</template>

<script>
import { jumpShoop, addDizhi, qiehuan, gengxin } from "@/api/user";
import { regionData } from "element-china-area-data";
export default {
  name: "SiteView",
  data() {
    return {
      flag: true, //添加和修改地址判断
      arr: [],
      num: 0, //商品总件数
      money: 0, //商品总价格
      dialogVisible: false,
      options: regionData,
      selectedOptions: [],
      ids: "", //地址id
      list: [], //购物车数据
      bianma: [], //邮政编码
      qhdizhi: [], //切换地址
      onceShujv: {},
      onceShujv2: {},
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        phone: "",
        dizhi: "",
        youzheng: "",
        delivery: false,
        biaoqian: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    handleChange(value) {
      this.bianma = value;
      console.log(value);
    },
    //点击添加地址弹出层出来
    addDizhiClick() {
      this.dialogFormVisible = true;
      this.flag = true;
    },
    //添加地址
    ensure() {
      //点击确定隐藏弹出层
      this.dialogFormVisible = false;
      //判断如果为true就是添加地址
      if (this.flag) {
        addDizhi(
          this.form.name,
          this.form.phone,
          this.bianma[0],
          this.bianma[1],
          this.bianma[2],
          this.form.dizhi,
          this.form.youzheng,
          this.form.biaoqian,
          0
        ).then((res) => {
          console.log(res);
        });
      } else {
        //如果为false就是修改
        gengxin(
          this.ids,
          this.form.name,
          this.form.phone,
          this.bianma[0],
          this.bianma[1],
          this.bianma[2],
          this.form.dizhi,
          this.form.youzheng,
          this.form.biaoqian,
          0
        ).then((res) => {
          console.log(res);
          this.ids = res.data.result;
          qiehuan(
            this.form.name,
            this.form.phone,
            this.bianma[0],
            this.bianma[1],
            this.bianma[2],
            this.form.dizhi,
            this.form.youzheng,
            this.form.biaoqian,
            0
          ).then((res) => {
            console.log(res);
            this.qhdizhi = res.data.result;
            console.log(this.qhdizhi);
            this.onceShujv2 = this.qhdizhi.filter(
              (item) => item.id == this.ids
            );
            this.onceShujv = this.onceShujv2[0];
          });
        });
      }

      this.selectedOptions = "";
      this.form.name = "";
      this.form.phone = "";
      this.form.dizhi = "";
      this.form.youzheng = "";
      this.form.biaoqian = "";
    },
    qiehuan2() {
      qiehuan(
        this.form.name,
        this.form.phone,
        this.bianma[0],
        this.bianma[1],
        this.bianma[2],
        this.form.dizhi,
        this.form.youzheng,
        this.form.biaoqian,
        0
      ).then((res) => {
        console.log(res);
        this.qhdizhi = res.data.result;
        console.log(this.qhdizhi);
      });
    },
    //切换地址
    qiehuan() {
      this.dialogVisible = true;
      this.qiehuan2();
    },
    xvanzhong(i) {
      this.ids = i.id;
      this.onceShujv2 = i;
    },
    sureDizhi() {
      this.dialogVisible = false;
      this.onceShujv = this.onceShujv2;
    },
    //修改地址
    xiugai() {
      this.dialogFormVisible = true;
      this.flag = false;
    },
    //提交订单
    // tijiao(){
    //   console.log(this.list);
    //   console.log(this.num);
      
    //   let a;
    //   this.qhdizhi.forEach(item => {
    //     return a = item.id
    //   })
    //  console.log(a);
    //   tijiao(this.list,"300187641",this.num,a,1,1,1).then(res => {
    //     console.log(res);
    //   })
    // }
  },
  created() {
    jumpShoop().then((res) => {
      let list = res.data.result.filter((item) => item.isEffective == true);
      this.list = list;
      this.list.filter((item) => {
        this.num += item.count;
        this.money += item.count * item.price;
      });
      // console.log(this.list);
    });
  },
};
</script>

<style lang="scss" scoped>
.box {
  background: white;
  width: 1240px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  h3 {
    font-size: 16px;
    font-weight: 400;
    line-height: 70px;
    border-bottom: 1px solid #f5f5f5;
  }
  .checkout-address {
    display: flex;
    width: 100%;
    border: 1px solid #f5f5f5;
    align-items: center;
    margin-top: 20px;
    padding: 20px;
    box-sizing: border-box;
    font-size: 14px;
    .text-box {
      width: 60%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      ul {
        width: 60%;
        li {
          line-height: 30px;
          span:nth-child(1) {
            color: #999999;
          }
        }
      }
    }
  }
  .action-box {
    width: 40%;
    text-align: center;
    .el-button {
      // width: 140px;
      // height: 46px;
      // line-height: 44px;
      background: white;
      border: 1px solid #e4e4e4;
      color: #666;
      border-radius: 5px;
      margin-left: 10px;
    }
  }
  .greenText {
    color: #27c0c5;
  }
  table {
    border-spacing: 0;
    td {
      // text-align: center;
      img {
        width: 70px;
        height: 70px;
      }
      .imgBox {
        width: 100%;
        display: flex;
      }
    }
  }
  thead {
    tr {
      line-height: 60px;
      background: #f5f5f5;
      th {
        font-weight: normal;
        font-size: 14px;
      }
    }
  }
  tbody {
    tr {
      border-bottom: 1px solid #f5f5f5;
    }
    td {
      &:nth-child(1) {
        text-align: left;
      }
      padding: 20px;
      text-align: center;
      box-sizing: border-box;
      .rightBox {
        margin-left: 10px;
        font-size: 14px;
        p {
          margin-top: 5px;
        }
      }
    }
  }
  .qiehuanBox {
    width: 100%;
    li {
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
      border: 1px solid #f5f5f5;
      margin-top: 10px;
      &:hover {
        background: #e6faf6;
        border-color: #27ba9b;
      }
      p {
        margin-top: 10px;
      }
    }
  }
}
.shoopJine {
  div {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    span {
      font-size: 14px;
    }
    span:nth-child(1) {
      width: 70px;
    }
    span:nth-child(2) {
      width: 200px;
      text-align: right;
    }
    .redText {
      color: #cf4444;
      font-size: 20px;
    }
  }
}
.submit {
  text-align: right;
  padding: 60px;
}
.tjBtn {
  width: 180px;
  height: 50px;
  border-radius: 3px;
  border: none;
  background: #27ba9b;
  color: #fff;
}
</style>    